<template>
	<view class="warp">
		<view class="header">
			<view class="touxiang" @click="login">
				<image src="/static/img/tabbar/guanzhuactive.png" mode=""></image>
				<text>{{userName?userName:'登录'}}</text>
			</view>
			<view class="herder_main">
				<view class="herder_main_item">
					<view>1</view>
					<view>已连续打卡</view>
				</view>
				<view class="herder_main_item">
					<view>11</view>
					<view>总记账天数</view>
				</view>
				<view class="herder_main_item">
					<view>5</view>
					<view>总记账笔数</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="conent_lable">
				<image src="/static/img/qa.png" mode=""></image>
				<view class="conent_lable_main">
					类别设置
				</view>
			</view>
			<view class="conent_lable">
				<image src="/static/img/qa.png" mode=""></image>
				<view class="conent_lable_main">
					定时提醒
				</view>
			</view>
			<view class="conent_lable">
				<image src="/static/img/qa.png" mode=""></image>
				<view class="conent_lable_main">
					升级至鲨鱼记账app
				</view>
			</view>
			<view class="conent_lable">
				<image src="/static/img/qa.png" mode=""></image>
				<view class="conent_lable_main">
					推荐鲨鱼记账给好友
				</view>
			</view>
			<view class="conent_lable">
				<image src="/static/img/qa.png" mode=""></image>
				<view class="conent_lable_main">
					关于鲨鱼记账
				</view>

			</view>
			<view class="conent_bottom">
				<view class="conent_bottom_title">
					小工具
				</view>
				<view class="conent_bottom_main">
					<view class="conent_bottom_item">
						<image src="/static/img/tabbar/homeactive.png" mode=""></image>
						<view class="">
							房贷计算器
						</view>
					</view>
					<view class="conent_bottom_item">
						<image src="/static/img/tabbar/homeactive.png" mode=""></image>
						<view class="">
							房贷计算器
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<Tabbar :page="page" @addCheck='isAddCheck=true'></Tabbar>
		
		<addList v-if="isAddCheck" @Cancel="isAddCheck=false"></addList>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isAddCheck:false,
				page:'/pages/tabbar/tabbar-5/tabbar-5',
				title: 'Hello',
				userName:''
			}
		},
		onLoad() {

		},
		methods: {
			login() {
				  uni.navigateTo({
				        url: '/pages/login/login' // 目标页面的路径
				      });
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		background: yellow;
	}

	.touxiang {
		display: flex;
		align-items: center;
		padding-left: 20px;
		padding-top: 50px;
		font-size: 16px;
		font-weight: bold;



		image {
			width: 30px;
			height: 30px;
			border-radius: 50%;
			margin-right: 16px;

		}
	}

	.herder_main {
		display: flex;
		justify-content: space-between;
		padding: 0 16px 20px;
		margin-top: 20px;

	}

	.herder_main>view {
		flex: 1;
		text-align: center;
	}

	.herder_main_item>view:first-child {
		font-weight: bold;
	}

	.herder_main_item>view:last-child {
		font-size: 12px;
		color: #999;
		margin-top: 6px;
	}

	.conent_lable {
		display: flex;
		padding: 0px 16px;
		justify-content: space-between;
		background: #fff;
		align-items: center;
	}

	.conent_lable_main::after {
		content: ">";
		font-size: 16px;
		color: #999;


	}

	.conent_lable>image {
		width: 20px;
		height: 20px;
		margin-right: 16px;
	}

	.conent_lable_main {
		flex: 1;
		border-bottom: 1px solid #f8f8f8;
		padding: 12px 0;
		display: flex;
		justify-content: space-between;
	}

	.conent_bottom_title {
		padding: 16px;
		font-weight: bold;
		border-top: 10px solid #f8f8f8;
	}

	.conent_bottom_main {
		display: flex;
		padding: 0 16px;
	}

	.conent_bottom_item {
		text-align: center;
		margin-right: 15px;
		font-size: 14px;
	}

	.conent_bottom_item>image {
		width: 30px;
		height: 30px;
		border-radius: 50%;
	}

	.content {}
</style>